<template>
  <div class="app-menu-list">
    <ul>
      <li v-for="menuGroup in menus" :key="menuGroup.name">
        <div class="app-menu-group-name">
          <span>{{ menuGroup.name }}</span>
        </div>
        <ul>
          <li v-for="menu in menuGroup.children" :key="menu.title" :class="{'app-menu-active':currentPath === menu.page}" @click="handleClickMenu(menu)">
            <div class="app-menu-name">
              <span>{{ menu.name }}</span>
              <span>{{ menu.title }}</span>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { AppMenu, MENUS } from './menus'
import { AppNavigator } from '../navigator/app-navigator'

export default {
  name: 'AppMenu',
  props: {
    currentPath: String
  },
  setup() {
    const navigator = AppNavigator.use.inject()

    return {
      menus: MENUS,
      handleClickMenu: (menu: AppMenu) => {
        navigator.methods.go(menu.page)
      }
    }
  }
}
</script>

<style lang="scss">
    .app-menu-list {
        height: 100%;
        overflow: auto;

        ul {
            list-style: none;
            margin: 0;
            padding: 0;

            .app-menu-name, .app-menu-group-name {
                font-size: 14px;
                padding: 10px 24px 12px 32px;
                white-space: nowrap;
                color: #333;
                cursor: pointer;
                transition: all 300ms linear;

                &:hover {
                    background-color: rgba(#42b983, 0.1);
                    color: #42b983;
                }
            }

            .app-menu-name {
                position: relative;

                & > span {
                    &:nth-child(2) {
                        font-size: 12px;
                        margin-left: 0.5em;
                        color: #ccc;
                    }
                }

                .ly-icon {
                    position: absolute;
                    right: 16px;
                    line-height: 40px;
                }
            }

            .app-menu-group-name {
                padding-left: 24px;
                letter-spacing: 1px;
                font-size: 12px;
                font-weight: 600;
                color: #42b983;
            }
        }

        &:after {
            position: absolute;
            top: 0;
            bottom: 0;
            right: -30px;
            width: 30px;
            content: '';
            box-shadow: inset 10px 0 8px -8px #f0f1f2;
        }
    }
</style>
